<!--  -->
<template>
    <div style="padding: 20px;">
        <section class="bewteen">
            <div class="mt-4">
                <el-input v-model="searchTemp" size="large" clearable style="width: 600px" placeholder="请输入">
                    <template #append><el-button :icon="Search" @click="searchBtn" /></template>
                </el-input>
            </div>
            <div>
                <el-button type="primary" plain style="margin-bottom: 20px;" @click="addRole">添加</el-button>
            </div>
        </section>
        <!-- 添加按钮 -->

        <!-- 新增编辑抽屉 -->
        <AddorEditDrawer ref="AddorEditRef" @success="onSuccess"></AddorEditDrawer>
        <!-- 表格 -->
        <PublicTables :tableData="roleList">
            <template #tableColumns>
                <el-table-column label="编号" align="center" prop="roleId">
                </el-table-column>
                <el-table-column label="角色名称" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.roleId === 1 ? 'danger' : ''">{{ scope.row.roleName }}</el-tag>
                    </template>
                </el-table-column>
            </template>
            <!-- 操作区域 -->
            <template #operate>
                <el-table-column label="编辑" align="center">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row.roleId)">删除</el-button>
                    </template>
                </el-table-column>
            </template>
        </PublicTables>
        <!-- 分页 -->
        <PublicPagination ref="pageRef" :total="total" @paginAtion="fetchData"></PublicPagination>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import PublicTables from '../../components/PublicTables.vue'
//import AddorEditDrawer from '../../components/role/AddorEditDrawer'
import { ElMessage, ElMessageBox } from 'element-plus'
import PublicPagination from '../../components/PublicPagination.vue'
import { Search } from '@element-plus/icons-vue'
// 获取角色列表
const roleList = ref([])
const total = ref(0)
const searchTemp = ref("")
const pageRef = ref()

onMounted(() => {
    getRoleListFun()
})
const searchBtn = ()=>{
    console.log(searchTemp.value,'当前输入的内容')
}

// API
const getRoleListFun = async (page?: any, pageSize?: any) => {
    const tableData = [
        {
            roleName: "测试",
            roleId: 1
        },
        // {
        //     roleName:"测试",
        //     roleId:1
        // },
        // {
        //     roleName:'你是？',
        //     roleId:2,
        // },
        // {
        //     roleName:'你是？',
        //     roleId:2,
        // },
        // {
        //     roleName:'你是？',
        //     roleId:2,
        // }
    ]
    roleList.value = tableData
    total.value = 20
    // const res = await getRoleList(page, pageSize)
    // roleList.value = res.data

    // total.value = res.total
}

// 分页加载数据
const fetchData = (obj: any) => {
    getRoleListFun(obj.page, obj.pageSize)
}
//定义编辑组件ref对象--通过AddorEditRef可以获取组件暴露的实例对象
let AddorEditRef = ref()

// 添加
const addRole = () => {
    // 通过ref调用子组件暴露出来的方法
    AddorEditRef.value.open({})
}
// 编辑
const handleEdit = (row: any) => {
    // 打开编辑抽屉时，使用深拷贝克隆表格数据到编辑表单中
    const editForm = JSON.parse(JSON.stringify(row))
    // 通过ref调用子组件暴露出来的方法
    AddorEditRef.value.open(editForm)
}

// 删除
const handleDelete = (roleId: any) => {
    ElMessageBox.confirm(
        '确定要删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(async () => {
            console.log(roleId)
            ElMessage.success('删除成功')
            pageRef.value.handleEdit()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        }
        )
}

const onSuccess = (type: string) => {
    if (type === 'add') {
        pageRef.value.handleChange()

    } else {
        pageRef.value.handleEdit()
    }
}
</script>
<style lang='scss' scoped>
.bewteen{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
</style>